<!-- @format -->

<template>
  <view 
    class="comp-checkbox-group"
    :class="{
      'comp-checkbox-group--horizontal': direction === 'horizontal',
      'comp-checkbox-group--button': button
    }"
  >
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
import { provide, computed } from 'vue'

// 定义复选框组属性
interface Props {
  /** 当前选中的值 */
  modelValue: (string | number | boolean)[]
  /** 是否禁用所有复选框 */
  disabled?: boolean
  /** 最大可选数量 */
  max?: number
  /** 排列方向 */
  direction?: 'vertical' | 'horizontal'
  /** 是否为按钮样式 */
  button?: boolean
}

// 定义默认属性
const props = withDefaults(defineProps<Props>(), {
  disabled: false,
  max: Infinity,
  direction: 'vertical',
  button: false
})

// 定义事件
const emit = defineEmits<{
  /** 更新选中值 */
  (e: 'update:modelValue', value: (string | number | boolean)[]): void
  /** 变更事件 */
  (e: 'change', value: (string | number | boolean)[]): void
}>()

// 切换选中状态
const toggle = (value: string | number | boolean) => {
  const newValue = [...props.modelValue]
  const index = newValue.indexOf(value)
  
  if (index === -1) {
    // 如果未选中且未达到最大数量，则添加
    if (newValue.length < props.max) {
      newValue.push(value)
    }
  } else {
    // 如果已选中，则移除
    newValue.splice(index, 1)
  }
  
  emit('update:modelValue', newValue)
  emit('change', newValue)
}

// 检查值是否被选中
const isValueChecked = (value: string | number | boolean) => {
  return props.modelValue.indexOf(value) !== -1
}

// 检查是否达到最大选择数量
const isMaxLimitReached = computed(() => {
  return props.modelValue.length >= props.max
})

// 提供给子组件的上下文
provide('checkboxGroup', {
  props,
  toggle,
  isValueChecked,
  isMaxLimitReached: () => isMaxLimitReached.value
})
</script>

<style lang="scss">
.comp-checkbox-group {
  display: flex;
  flex-direction: column;
  
  &--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  &--button {
    display: inline-flex;
    flex-direction: row;
    overflow: hidden;
  }
}
</style>